<!DOCTYPE html>
<html lang="en">
    
    <head>
        <title>Lesson - Lesson Page | Tut-Tutoring</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/colorbox.css" />
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/cufon-yui.js"></script>
        <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
        <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
        <script type="text/javascript" src="js/cufon-replace.js"></script>
        <script type="text/javascript" src="js/roundabout.js"></script>
        <script type="text/javascript" src="js/roundabout_shapes.js"></script>
        <script type="text/javascript" src="js/gallery_init.js"></script>
        <script type="text/javascript" src="js/loopedslider.min.js"></script>
        <script type="text/javascript" src="js/jquery.colorbox.js"></script>
        <link rel="stylesheet" href="prettyPhoto.css">
        
        <script type="text/javascript">
            $(function () {
                // Option set as a global variable
                $('#loopedSlider').loopedSlider({
                    container: ".wrap",
                    containerClick: false
                });
            });
        </script>
        <script>
            $(document).ready(function () {

                $(".inline").colorbox({
                    inline: true,
                    width: "50%"
                });
                $(".callbacks").colorbox({
                    onOpen: function () {
                        alert('onOpen: colorbox is about to open');
                    },
                    onLoad: function () {
                        alert('onLoad: colorbox has started to load the targeted content');
                    },
                    onComplete: function () {
                        alert('onComplete: colorbox has displayed the loaded content');
                    },
                    onCleanup: function () {
                        alert('onCleanup: colorbox has begun the close process');
                    },
                    onClosed: function () {
                        alert('onClosed: colorbox has completely closed');
                    }
                });

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function () {
                    $('#click').css({
                        "background-color": "#f00",
                        "color": "#fff",
                        "cursor": "inherit"
                    }).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
        <!--[if lt IE 7]>
            <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
        <![endif]-->
        <!--[if lt IE 9]>
            <script type="text/javascript" src="js/html5.js"></script>
            <script type="text/javascript" src="js/IE9.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <!-- header -->
        <header>
            <div class="container">
                <h1>
                    <a href="index.html">Tut-Tutoring</a>
                </h1>
                <nav>
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="lesson.html">Lesson</a>
                        </li>
                        <li>
                            <a href="gallery.html" class="current">Gallery</a>
                        </li>
                        <li>
                            <a class='inline' href="#inline_content">Edit Details</a>
                        </li>
                        <li>
                            <a href="">Logout</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- #gallery -->
        <section id="gallery">
            <div class="container">
                <div class="intro_left">
                    <h2>Title:
                        <span>Song name</span>
                    </h2>
                    <div  class="lightbox gallery">
                    <ul>
                       <li><a href="http://www.youtube.com/watch?v=cTJBLp6Kp8k" rel="prettyPhoto" title="YouTube demo">
                       <img src="http://img.youtube.com/vi/cTJBLp6Kp8k/2.jpg" width="150" height="150" alt="" />
                     </a></li> </ul>
                   </div>  
                    <script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script type="text/javascript" charset="utf-8">
			(function() {
			
				//prettyphoto lightbox script
				$("area[rel^='prettyPhoto']").prettyPhoto();
				
				$(".lightbox a[rel^='prettyPhoto']").prettyPhoto({
					animation_speed:'normal',
					theme:'light_square',
					slideshow:3000, 
					autoplay_slideshow: false
				});

				//accordion script
				$('#accordion h3').click(function() {
					$(this).next().toggle('slow');
					return false;
				}).next().hide();
		
			})();
	</script>
                    
                    <p>Us error sit voluvitae dicta sunt explicabo. Nemo enim ipsam voluptatem
                        quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
                        magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
                        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
                        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
                        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
                        nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
                        nulla pariatur.</p>
                </div>
            </div>
        </section>
        <!-- /#gallery -->
        <div class="main-box">
            <div class="container">
                <div class="inside">
                    <div class="wrapper">
                        <!-- aside -->
                        <aside>
                            <h2>Top
                                <span>Uploads</span>
                            </h2>
                            <!-- loopedSlider begin -->
                            <div id="loopedSlider">
                                <div class="wrap">
                                    
                                    <div class="slides">
                                        <div>
                                            <a href="#"><img src="images/thumb1.png" alt=""></a>
                                        </div>
                                        <div>
                                            <a href="#"><img src="images/thumb1.png" alt=""></a>
                                        </div>
                                        <div>
                                            <a href="#"><img src="images/thumb1.png" alt=""></a>
                                        </div>
                                        <div>
                                            <a href="#"><img src="images/thumb1.png" alt=""></a>
                                        </div>
                                        <div>
                                            <a href="#"><img src="images/thumb1.png" alt=""></a>
                                        </div>
                                    </div>
                                    
                                </div>
                                <ul class="nav-controls">
                                    <li>
                                        <a href="#" class="previous">Previous Page</a>
                                    </li>
                                    <li>
                                        <a href="#" class="next">Next Page</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- loopedSlider end -->
                            <br/>
                            <br/>
                            <h2>Upload
                                <span>mp3</span>
                            </h2>
                            <ul>
                                <li>
                                    <input value="" id="user_login" name="user[login]" placeholder="upload"
                                    size="20" type="text" required>
                                    <img style="border: none;" src="images/UploadFile.png" alt="upload file">
                                </li>
                                <li>
                                    <button class="button_save">
                                        <strong>Save</strong>
                                    </button>
                                </li>
                            </ul>
                        </aside>
                        <!-- content -->
                        <section id="content">
                            <article>
                                <h2>Try
                                    <span>Lesson</span>
                                </h2>
                                <div id="lesson">Lesson will go here</div>
                            </article>
                            <div class="controls_bar">
                                <div id="editor-controls">
                                    <button class="button_save">
                                        <strong>play</strong>
                                    </button>
                                    <button class="button_save">
                                        <strong>replay</strong>
                                    </button>
                                    <button class="button_save">
                                        <strong>scroll</strong>
                                    </button>
                                </div>
                                <div id="opionion-controls">
                                    <button class="button_save">
                                        <strong>Completed</strong>
                                    </button>
                                    <span class="tooltip-bottom" title="Like">
                                        <img src="images/upvote.png" />
                                    </span>
                                    <span class="tooltip-bottom" title="Dislike">
                                        <img src="images/downvote.png" />
                                    </span>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <!-- This contains the hidden content for inline calls -->
        <div style='display:none'>
            <div class="img_modal" id='inline_content' style='padding:10px;'>
                <h2>Edit Details</h2>
                <ul>
                    <li>
                        <input style="padding-bottom:5px" value="" id="user_login" name="user[login]"
                        placeholder="username" size="30" type="text" required>
                    </li>
                    <li>
                        <input value="" id="user_login" name="user[login]" placeholder="password"
                        size="30" type="text" required>
                    </li>
                    <li class="button">
                        <input type="hidden" name="option" value="edit details" />
                        <input class="button_save" name="commit" value="Save" type="submit">
                    </li>
                </ul>
            </div>
        </div>
        <!-- footer -->
        <footer>
            <div class="container">
                <div class="wrapper">
                    <div class="fleft">Copyright - Tut-Tutoring</div>
                    <div class="fright"></div>
                </div>
            </div>
        </footer>
        <script type="text/javascript">
            Cufon.now();
        </script>
    </body>

</html>